import React, {useState, useRef} from 'react'
import { Form, Input, Button, Toast } from 'antd-mobile'
import {userLogin} from '@a/index'
import {useNavigate, useLocation} from 'umi'
import { EyeInvisibleOutline, EyeOutline } from 'antd-mobile-icons'
export default function index() {
  const navigate = useNavigate()
  const toFrom = useRef()
  const location = useLocation()
  console.log(location);
  
  const [useInfo, setUseInfo] = useState({})
  //封装登录接口请求的封装
const userLogined = (params = {}) => {
  userLogin(params).then(res => {
    console.log(res);
    if (res.data.code === 0) {
      localStorage.setItem('token', res.data.data.token)
      localStorage.setItem('uid', res.data.data.uid)
setUseInfo(
  {
    token: res.data.data.token,
    uid: res.data.data.uid
  }
  )
  //登录成功后用户提示
  Toast.show({
    content: '登录成功',
    afterClose: () => {
      if (location.state){
        navigate(location.state.from)
      }else{
        navigate('/home')
      }
    }
  })
 //登录成功后用户提示
    }
  })
}
  //封装登录接口请求的封装

  //提交表单且数据验证成功后触发
  const onFinish = (values: any) => {
    userLogined(
      {
        username: values.username,
        pwd: values.pwd,
        deviceId: '1221', //登录设备ID，自定义即可
        deviceName: '手机号' //登录设备名称， 自定义即可
      })
  }
  //提交表单且数据验证成功后触发

  //提交表单且数据验证失败后触发
  const onFinishFailed = () => {
    toFrom.current?.resetFields()  //验证失败重置输入框
  }
  //提交表单且数据验证失败后触发

  //控制密码框内容的显示和隐藏状态
  const [visible, setVisible] = useState(false)
  //控制密码框内容的显示和隐藏状态
  return (
    <div className='loginPage'>
      <Form
       ref={toFrom}
        layout='horizontal'
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        footer={
          <Button block type='submit' color='primary' size='small'>
            提交
          </Button>
          
        }
      >

        <Form.Item
          name='username'
          label='用户名'
          rules={[
            {
              required: true,
              message: '用户名必填'
            },
            {
              pattern: /^[a-zA-Z]\w{3,7}$/,
              message: '用户名必须由4-8位英文数字下划线组成,必须字母开头'
            }
          ]}
        >
          <Input onChange={console.log} placeholder='请输入用户名' />
        </Form.Item>


        <Form.Item
          name='pwd'
          label='密码'
          rules={[
            {
              required: true,
              message: '密码输入错误'
            },
            {
              pattern: /^[a-zA-Z1-9]\w{3,7}$/,
              message: '用户名必须由4-8位英文数字下划线组成,必须字母开头'
            }
          ]}
          extra={
            <div >
              {!visible ? (
                <EyeInvisibleOutline onClick={() => setVisible(true)} />
              ) : (
                <EyeOutline onClick={() => setVisible(false)} />
              )}
            </div>
          }
        >
         <Input
              placeholder='请输入密码'
              clearable
              type={visible ? 'text' : 'password'}
            />
           
        </Form.Item>
      
      </Form>
      <Button 
      size='mini'
      color='primary'
      onClick = {
        () =>{
          navigate('/reg')
        }
      }
      >
            注册
          </Button>
    </div>
  )
}
